﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}

@* 导出引入文件 *@
<title>Layui with XLSX</title>
<!-- 引入Layui的CSS -->
@* <link rel="stylesheet" href="path/to/layui.css"> *@
<!-- 引入XLSX库的CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>到货通知单</title>
    <link href="~/lib/layui/css/layui.css" rel="stylesheet" />
    @* <script src="~/lib/layui/layui.js"></script> *@
    <script src="~/js/js.cookie.js"></script>
    <script src="~/js/moment.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <link href="//unpkg.com/layui@2.9.21-rc.3/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <!-- 查询条件 -->
    <form class="layui-form" action="">
        <div class="layui-form">
            <div class="layui-input-group">
                <!-- 通知单编号 -->
                <div class="layui-input-prefix">
                    <b>通知单编号</b>
                </div>
                <div>
                    <input id="strippingNode" type="text" placeholder="请输入通知单编号" class="layui-input" autocomplete="off" lay-affix="clear">
                </div>
                <!-- 通知单名称 -->
                <div class="layui-input-prefix">
                    <b>通知单名称</b>
                </div>
                <div>
                    <input id="strippingNode" type="text" placeholder="请输入通知单名称" class="layui-input" autocomplete="off" lay-affix="clear">
                </div>
                <!-- 采购订单编号 -->
                <div class="layui-input-prefix">
                    <b>采购订单编号</b>
                </div>
                <div>
                    <input id="strippingNode" type="text" placeholder="请输入采购订单编号" class="layui-input" autocomplete="off" lay-affix="clear">
                </div>
                <!-- 供应商名称 -->
                <div class="layui-input-prefix">
                    <b>供应商名称</b>
                </div>
                <div>
                    <input id="strippingNode" type="text" placeholder="请输入供应商名称" class="layui-input" autocomplete="off" lay-affix="clear">
                </div>
                <!-- 到货日期 -->
                <div class="layui-input-prefix">
                    <b>到货日期</b>
                </div>
                <div>
                    <input id="strippingNode" type="text" placeholder="请选择到货日期" class="layui-input" autocomplete="off" lay-affix="clear">
                </div>
                <!-- 单据状态 -->
                <div class="layui-input-prefix" style="left:50px">
                    <b>单据状态</b>
                </div>
                <div style="left:77px;width:197px">
                    <select id="documents" lay-filter="testSelect" autocomplete="off" lay-affix="clear">
                        <option value="">请选择单据状态</option>
                        <option value="1">草稿</option>
                        <option value="2">已确认</option>
                        <option value="3">审批中</option>
                        <option value="4">已审批</option>
                        <option value="5">已完成</option>
                    </select>
                </div>
                <!-- 按钮 -->
                <div class="layui-btn-container layui-col-xs12" style="left:85px">
                    <button class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </form>
    <br />
    <div>
        <button onclick="addAlls()" id="searchBtn" type="button" class="layui-btn layui-btn-normal layui-icon-addition">新增</button>
        <button type="button" class="layui-btn layui-icon-edit" layui-btn-green " >修改</button>
        <button type="button" class="layui-btn layui-bg-red layui-icon-delete">删除</button>
        <button type="button" class="layui-btn layui-bg-orange">导出</button>
    </div>
    <!-- 表格 -->
    <div>
        <table class="layui-table">
            <colgroup>
                <col width="80">
                <col width="130">
                <col width="130">
                <col width="130">
                <col width="130">
                <col width="130">
                <col width="130">
                <col width="130">
                <col width="130">
                <col width="130">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th style="text-align:center"><input type="checkbox" name="check" onclick="checkAll()" /></th> 
                    <th style="text-align:center">入库编号</th>
                    <th style="text-align:center">通知单名称</th>
                    <th style="text-align:center">采购订单号</th>
                    <th style="text-align:center">供应商名称</th>
                    <th style="text-align:center">联系人</th>
                    <th style="text-align:center">联系方式</th>
                    <th style="text-align:center">到货日期</th>
                    <th style="text-align:center">单据状态</th>
                    <th style="text-align:center">操作</th>
                </tr>
            </thead>
            <tbody style="text-align:center">
            </tbody>
        </table>
        <div id="demo-laypage-all"></div>
    </div>

    <!-- HTML Content -->
    <script src="//unpkg.com/layui@2.9.21-rc.3/dist/layui.js"></script>
    <script>
        layui.use(['form', 'laydate', 'util', 'table'], function () {
            var $ = layui.$;
            var layer = layui.layer;
            var form = layui.form;
            var laypage = layui.laypage;
            var laydate = layui.laydate;
            var util = layui.util;
            //分页+查询条件
            var pageIndex = 1;
            var pageSize = 2;
            var arrivalNoticeNode = "";
            var arrivalNoticeName = "";
            var purchaseIndentId = "";
            var supplierName = "";
            var arrivalNoticeTime = null;
            var documents = 0;

            //就绪函数
            $(function () {
                ArrivalNoticesLists(pageIndex, pageSize); //到货通知 显示
            });
            // 搜索提交
            form.on('submit(demo-table-search)', function (data) {
                ArrivalNoticesLists(pageIndex, pageSize);
                return false; // 阻止默认 form 跳转
            })
            //到货通知 显示
            function ArrivalNoticesLists(pageIndex, pageSize) {
                console.log(pageIndex, pageSize);
                $.post({
                    url: '@ViewBag.FoundationWrite' + '/api/ProductType/ArrivalNoticesLists',
                    data: JSON.stringify({
                        pageIndex: pageIndex,
                        pageSize: pageSize,
                        arrivalNoticeNode: $("#arrivalNoticeNode").val() || "",
                        arrivalNoticeName: $("#arrivalNoticeName").val() || "",
                        purchaseIndentId: $("#purchaseIndentId").val()||"",
                        arrivalNoticeTime: $("#arrivalNoticeTime").val()||null,
                        documents: $("#documents").val() || 0,
                    }),
                    async: false,
                    dataType: "json",
                    contentType: "application/json",
                    success: res => {
                        var cont = ""; //定义变量
                        $.each(res.data, function () {
                            cont += `<tr>
                              <td><input type="checkbox" class="check" value="${this.arrivalNoticeId}" onclick="checkfan()"/></td>
                              <td><span style="color:#1e9fff"><b>${this.purchaseNo}</b></span></td>
                              <td>${this.arrivalNoticeName}</td>
                              <td>${this.purchaseIndentId}</td>
                              <td>${this.supplierName}</td>
                              <td>${this.phoneName}</td>
                              <td>${this.phone}</td>
                              <td>${this.arrivalNoticeTime.replace("T", " ").substring(0, 19)}</td>
                              <td>${this.documents === 1 ? '草稿' : (this.documents === 2 ? '已确认' : (this.documents === 3 ? '审批中' : (this.documents === 4 ? '已审批' : '已完成')))}</td>
                                                      <td><a onclick="Updates('${this.arrivalNoticeId}','${this.arrivalNoticeNode}')" style="color:green"">修改</a></td>
                                    </tr>`
                        })
                        $("tbody").html(cont);
                        console.log(res);
                        //////////////////////////////////
                        // console.log(996, pageSize, pageIndex, res)
                        // 完整显示
                        laypage.render({
                            elem: 'demo-laypage-all', // 元素 id
                            count: res.totalCount, // 数据总数
                            curr: pageIndex,//当前页
                            limit: pageSize,//每页几条
                            limits: [1, 2, 3],
                            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                            jump: function (obj, first) {
                                console.log(obj.curr);
                                console.log(obj.limit);
                                if (!first) {

                                    ArrivalNoticesLists(obj.curr, obj.limit);
                                }
                            }
                        });
                        ////////////////////////////////////////
                        // <td><input type="checkbox" class="check" value="${this.strippingId}" onclick="checkfan()"/></td>
                    }
                });
            };

            //导出
            function exportTableToExcel() {
                var table = document.querySelector("table.layui-table tbody");
                var ws = XLSX.utils.table_to_sheet(table);
                var wb = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
                XLSX.writeFile(wb, "到货通知列表.xlsx");
            }

            document.querySelector(".layui-btn.layui-bg-orange").addEventListener("click", exportTableToExcel);

        });
        /////////////////////////////////////////////////////
        //跳转到货通知单 新增
        function addAlls() {
            location.href = "/Messages/ArrivalNoticesAdd";
        }

        //跳转到货通知单 修改
        function Updates(arrivalNoticeId, arrivalNoticeNode) {
            localStorage["arrivalNoticeNode"] = arrivalNoticeNode;
            console.log(arrivalNoticeId, arrivalNoticeNode);
            localStorage["arrivalNoticeId"] = arrivalNoticeId;
            location.href = "/Messages/ArrivalNoticesUpds?ArrivalNoticeId=" + arrivalNoticeId;
        }

        //全选反选
        function checkAll() {
            var check = $("[name=check]:eq(0)").prop("checked");
            $("[name=check]:gt(0)").prop("checked", check);
            console.log(check + "123321")
        }
        function checkfan() {
            var length1 = $("[name=check]:gt(0)").length
            var length2 = $("[name=check]:gt(0):checked").length
            var check = lengthl == length2;
            $("[name=check]:eq(0)").prop("checked", check)
        } 
    </script>
</body>
</html>